<script setup>
const props = defineProps(['score', 'teamName', 'rank'])
</script>

<template>

    <div class="team-score-bar-container" >
        <div class="team-score-bar-content" >
            <div>NO. {{props.rank}}<span>{{props.teamName}}</span></div>
            <span>{{props.score}}</span>
        </div>
        <div class="team-score-bar" :style="{width: props.score+'%'}" >

        </div>
        <span class="score-bar-footer-line" ></span>
    </div>
    
</template>

<style scoped>

.team-score-bar-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.team-score-bar-content > div {

    font-family: Source Han Sans CN;
    font-size: 16px;
    color: #8493a6;
}

.team-score-bar-content > div > span {
    font-size: 14px; 
    color: #707070;
    margin-left: 10px;
}


.team-score-bar {
    height: 6px;
	background-color: #8493a6;
    margin-bottom: 3px;
}

.score-bar-footer-line {
    display: block;
    height: 0;
    width: 100%;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #8493a6;
}

</style>